<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>18-样式操作l</title>
  <!--引入JQuery文件-->
  <script src="../js/jquery-3.6.0.js"></script>
  <style>
    div{
      width: 400px;
      height: 400px;
      border: 1px solid red;
    }
    .c1{
      font-size: 50px;
      color: red;
    }
    .c2{
      font-size: 100px;
      color: green;
    }
    .c3{
      font-weight: bolder;
    }
  </style>
  <script>
    // 文档加载事件
    $(function () {
      // 1. 点击添加样式按钮，为盒子设置文本样式效果
      /* $("#btn1").click(function () {
           $("#box1").css({
                fontSize:"100px",
                color:"blue"
           })
       })*/
      /* // 2. 点击添加样式按钮，为盒子设置文本样式效果
       $("#btn1").click(function () {
           $("#box1").addClass("c2");
           $("#box1").addClass("c3");
       })

       // 3. 点击删除样式按钮，删除盒子的文本样式效果
       $("button").eq(1).click(function () {
           $("#box1").removeClass("c3");
       })*/
      // 4. 点击切换样式按钮，切换盒子的文本样式效果
      $("button").eq(2).click(function () {
        $("#box1").toggleClass("c2");
      })


    })
  </script>
</head>
<body>
<div id="box1">盒子</div>
<button id="btn1">添加样式</button>
<button>删除样式</button>
<button>切换样式</button>
</body>
</html>